<template>
    <div>
        <div class="pay-bg" v-if="flag" id="mask">
            <div class="pay-tool">
                <div class="pay-tool-title border-bottom">
                <span  @click="backHandle()" class="iconfont icon-zuo"></span><strong>请输入交易密码</strong>
                </div>
                <div class="pay-tool-content">
                <div class="pay-tool-inputs">
                    <div class="item" v-for="(i,key) in items" :key="key"><span class="icon_dot" v-if="password[i]"></span></div>
                </div>
                </div>
                <div class="pay-tool-keyboard">
                <ul>
                    <li @click="keyUpHandle($event,key)" v-for="(val,key) in keys" :key="key">
                    {{ val }}
                    </li>
                    <li class="del" @click="delHandle"><span class="icon-del" style="font-size:14px">回退</span></li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "确认", 0];
import {  Popup, Toast, MessageBox } from "mint-ui";
export default {
    data(){
        return {
            keys: keys(),
            items: [0, 1, 2, 3, 4, 5],
            password:[]
        }
    },
    props:{
        flag:{
            type:Boolean,
            default:false
        },
        clearPwd:{
            type:Boolean,
            default:false
        }
    },
    components:{
        Toast
    },
    methods:{
        backHandle() {
            this.$emit("close");
            if(!this.clearPwd){
                this.password = [];
            }
        },
        keyUpHandle(e,index) {
            if(index == 9){
                if(this.password.length < 6){
                    Toast({
                        message: "请输入6位密码",
                        position: "bottom",
                        duration: 5000
                    });
                    return false;
                }else{
                    console.log(1111)
                    this.$emit("ok");
                }
                
                
            }else{
                let text = e.currentTarget.innerText;
                let len = this.password.length;
                if (!text || len >= 6) return;
                this.password.push(text);
                this.$emit("changePwd",this.password);
            }
            
        },
        delHandle() {
            if (this.password.length <= 0) return false;
            this.password.shift();
            this.$emit("changePwd",this.password);
        },
    },
    watch:{
        flag(newVal){
            if (newVal) {
                let cssStr = "overflow-y: hidden; height: 100%;";
                document.getElementsByTagName('html')[0].style.cssText = cssStr;
                document.body.style.cssText = cssStr;
                document.getElementById("app").style.cssText = cssStr;
                setTimeout(() => {
                    var shield=document.getElementById("mask");
                    shield.addEventListener("touchstart",function(e){
                        e.stopPropagation();
                        // e.preventDefault();
                    },false);
                })
            } else {
                let cssStr = "overflow-y: auto; height: auto;";
                document.getElementsByTagName('html')[0].style.cssText = cssStr;
                document.body.style.cssText = cssStr;
            }

            // 下面需要这两行代码，兼容不同浏览器
            document.body.scrollTop = this.pageScrollYoffset;
            window.scroll(0, this.pageScrollYoffset);
        }
    }
}
</script>

<style>
@import url("../../../static/css/pay.css");
</style>
